.topBar {
  width: 100%;
  height: Rm(44);
  line-height: Rm(44);
  background: #ffffff;
  text-align: center;
  box-shadow: inset 0px -1px 0px 0px #eeeeee;
  position: fixed;
  top: 0;
  z-index: 100; }
  .topBar span {
    font-size: Rm(18);
    color: #333333;
    letter-spacing: -0.97px;
    font-weight: bold; }
  .topBar i {
    position: absolute;
    display: block;
    width: Rm(44);
    height: Rm(44); }
    .topBar i.topBar_left {
      top: 0;
      left: 0;
      background: url("./bg_img/cuo.png") no-repeat center right;
      background-size: Rm(16) Rm(16); }
    .topBar i.topBar_right {
      top: 0;
      right: 0;
      background: url("./bg_img/more.png") no-repeat center left;
      background-size: 80%; }

.logo {
  margin-top: Rm(77); }
  .logo img {
    width: Rm(140);
    height: Rm(68);
    margin-left: Rm(20); }

.nav {
  height: Rm(50);
  margin: Rm(8) 0 Rm(30);
  padding: 0 Rm(30) 0;
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: space-between; }
  .nav li {
    margin-top: Rm(13); }
    .nav li span {
      display: inline-block;
      line-height: Rm(22);
      font-size: Rm(16);
      color: #ffe2b7;
      letter-spacing: 0;
      margin-bottom: Rm(3); }
    .nav li i {
      display: none; }
    .nav li.nav_active span {
      color: #ffa217; }
    .nav li.nav_active i {
      display: block;
      margin: 0 auto;
      width: Rm(32);
      height: Rm(6);
      background-image: linear-gradient(135deg, #ffe3b2 2%, #ffa500 97%);
      border-radius: Rm(3); }

ul.nav_active {
  display: block; }

.list {
  margin-bottom: Rm(88);
  padding: 0 Rm(20);
  display: none; }
  .list li {
    margin: 0 auto Rm(26);
    height: Rm(120);
    border-radius: Rm(10);
    position: relative; }
    .list li .lis_left {
      float: left;
      width: Rm(38);
      height: Rm(38);
      border-radius: 50%;
      background: #ffffff;
      margin-top: 10px;
      margin-left: 12px; }
    .list li .lis_right {
      float: left;
      margin-left: Rm(10);
      width: Rm(266);
      padding: Rm(11) Rm(9) 0 0; }
      .list li .lis_right p.tit {
        height: Rm(22);
        margin-bottom: Rm(14);
        font-size: Rm(16); }
        .list li .lis_right p.tit b,
        .list li .lis_right p.tit span {
          display: block;
          color: #ffffff;
          letter-spacing: 0;
          float: left;
          font-weight: normal; }
        .list li .lis_right p.tit span {
          margin-left: Rm(70); }
          .list li .lis_right p.tit span i {
            padding-top: Rm(4);
            padding-left: Rm(5);
            height: Rm(17);
            font-size: Rm(12);
            color: #ffffff;
            letter-spacing: 0;
            font-style: normal; }
      .list li .lis_right p.txt {
        height: Rm(17);
        font-size: Rm(12);
        color: #ffffff;
        letter-spacing: 0;
        display: -webkit-box;
        line-height: Rm(17);
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical; }
      .list li .lis_right div.passage {
        height: Rm(5);
        background: rgba(255, 255, 255, 0.4);
        margin: Rm(11) 0 Rm(5);
        border-radius: Rm(3);
        position: relative; }
        .list li .lis_right div.passage i {
          display: block;
          width: 5.9%;
          position: absolute;
          height: Rm(5);
          background: #ffffff;
          border-radius: Rm(25); }
      .list li .lis_right p.time {
        height: Rm(17);
        line-height: Rm(17);
        font-size: Rm(12); }
        .list li .lis_right p.time span {
          color: #fff;
          display: block; }
          .list li .lis_right p.time span:nth-child(1) {
            float: left; }
          .list li .lis_right p.time span:nth-child(2) {
            float: right; }
    .list li.lis_hot {
      background: linear-gradient(270deg, #ff8d8d 0%, #ffdc65 98%); }
      .list li.lis_hot i.hot {
        position: absolute;
        width: Rm(35);
        height: Rm(35);
        display: block;
        background: url("./bg_img/hot.png") no-repeat;
        top: 0;
        left: 0;
        background-size: Rm(35) Rm(35); }
    .list li.lis_pur {
      background-image: linear-gradient(270deg, #bd76ff 2%, #ff9ac3 100%); }
      .list li.lis_pur div.passage i {
        width: 7.2%; }
    .list li.lis_blue {
      background-image: linear-gradient(270deg, #7f95ff 0%, #99d6ff 100%); }
      .list li.lis_blue div.passage i {
        width: 7.2%; }

.lis_b li::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  background: #fff;
  opacity: 0.5;
  top: 0;
  left: 0;
  z-index: 10; }

.lis_c li {
  background-image: linear-gradient(90deg, #e4e4e4 5%, #d8d8d8 95%); }
  .lis_c li .passage {
    display: none; }
  .lis_c li div.lis_right p.time {
    margin-top: Rm(15);
    height: Rm(25); }
    .lis_c li div.lis_right p.time b {
      line-height: Rm(25);
      font-size: Rm(18);
      color: #ffffff;
      letter-spacing: 0;
      font-weight: normal; }
    .lis_c li div.lis_right p.time i {
      padding-top: Rm(8);
      padding-left: Rm(10);
      font-style: normal;
      height: Rm(17);
      line-height: Rm(17);
      font-size: Rm(12);
      color: #ffffff;
      letter-spacing: -0.6px; }
    .lis_c li div.lis_right p.time span {
      line-height: Rm(25); }
      .lis_c li div.lis_right p.time span:nth-child(2) {
        margin-right: 36px; }

.btoBar {
  width: 100%;
  height: Rm(68);
  background: #ffffff;
  box-shadow: inset 0px 2px 0px 0px #eeeeee;
  position: fixed;
  bottom: 0;
  z-index: 100; }
  .btoBar a {
    display: block;
    width: 33.3%;
    text-align: center;
    float: left;
    height: Rm(68); }
    .btoBar a i {
      display: block;
      width: Rm(24);
      height: Rm(24);
      margin: Rm(10) auto Rm(3); }
    .btoBar a:nth-child(1) i {
      background: url("./bg_img/candy.png") no-repeat center center;
      background-size: Rm(20) Rm(24); }
    .btoBar a:nth-child(2) i {
      background: url("./bg_img/wa.png") no-repeat center center;
      background-size: Rm(24) Rm(24); }
    .btoBar a:nth-child(3) i {
      background: url("./bg_img/user.png") no-repeat center center;
      background-size: Rm(22) Rm(24); }
    .btoBar a span {
      height: Rm(20);
      line-height: Rm(20);
      font-size: Rm(14);
      color: #b2b2b2; }
    .btoBar a.active span {
      color: #ffa217; }
    .btoBar a.active:nth-child(1) i {
      background: url("./bg_img/candy2.png") no-repeat center center;
      background-size: Rm(20) Rm(24); }
    .btoBar a.active:nth-child(2) i {
      background: url("./bg_img/wa2.png") no-repeat center center;
      background-size: Rm(24) Rm(24); }
    .btoBar a.active:nth-child(3) i {
      background: url("./bg_img/user2.png") no-repeat center center;
      background-size: Rm(22) Rm(24); }
